<!--
 * @Author: lxw
 * @Date: 2021-02-08 17:53:59
 * @Description: 首页右侧边栏组件
 -->
<template>
  <div class="sidebar page-container__sidebar">
    <v-card width="100%">
      <v-img height="322" gradient="rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)" :src="randomGirl.url">
        <div class="full-height random-girl__container">
          <div class="random-girl__date">
            <span class="random-girl__day">{{ randomGirl.day | dateFirstZero }}</span>
            <span>{{ randomGirl.month | dateFirstZero }}月,{{ randomGirl.year }}</span>
          </div>
          <p class="random-girl__title">妹子图{{ randomGirl.title }}</p>
          <v-icon
            class="random-girl__icon-refresh"
            :class="{'random-girl__icon-refresh--loading': randomGirlLoad}"
            @click="getRandomGirl"
          >
            mdi-refresh
          </v-icon>
        </div>
      </v-img>
    </v-card>
    <v-card class="mt-8">
      <v-card-title>本周最🔥妹纸</v-card-title>
      <v-row class="pl-2 pr-2" dense justify="space-around">
        <v-col v-for="item of hotGirlList" :key="item._id" cols="4">
          <router-link :to="'/details/girl/' + item._id">
            <v-img class="rounded" height="100%" :src="item.images[0]" />
          </router-link>
        </v-col>
      </v-row>
    </v-card>
    <v-card class="mt-8">
      <v-card-title>本周最热文章</v-card-title>
      <v-card v-for="item of articleList" :key="item._id" class="mt-4">
        <v-row dense>
          <v-col cols="4">
            <router-link :to="'/details/article/' + item._id">
              <v-img class="rounded" height="80" :src="item.images[0]" />
            </router-link>
          </v-col>
          <v-col class="ml-3" cols="7">
            <v-row justify="space-around" dense class="flex-column fill-height">
              <div class="sidebar__article-title">{{ item.title }}</div>
              <div class="text--disabled text-sm-caption">{{ item.publishedAt | fromNow }}</div>
            </v-row>
          </v-col>
        </v-row>
      </v-card>
    </v-card>
    <v-card class="mt-8">
      <v-card-title>本周最热干货</v-card-title>
      <v-card v-for="item of reals" :key="item._id" class="mt-4">
        <v-row dense>
          <v-col cols="4">
            <v-img class="rounded" height="80" :src="item.images[0]" />
          </v-col>
          <v-col class="ml-3" cols="7">
            <v-row justify="space-around" dense class="flex-column fill-height">
              <div class="sidebar__article-title">{{ item.desc }}</div>
              <div class="text--disabled text-sm-caption">{{ item.publishedAt | fromNow }}</div>
            </v-row>
          </v-col>
        </v-row>
      </v-card>
    </v-card>
  </div>
</template>

<script>
import { listRandom } from '@/apis'
import { removeFirstZero } from '@/utils/common'

export default {
  name: 'Sidebar',
  filters: {
    dateFirstZero: removeFirstZero
  },
  data () {
    return {
      randomGirl: {},
      randomGirlLoad: false,
      hotGirlList: [],
      articleList: [],
      reals: []
    }
  },
  created () {
    this.getRandomGirl()
    this.getHotGirl()
    this.getHotArticle()
    this.getHotReal()
  },
  methods: {
    async getRandomGirl () {
      if (this.randomGirlLoad) return

      this.randomGirlLoad = true
      const { data: [_data] } = await listRandom('/category/Girl/type/Girl/count/1')
      const [year, month, day] = _data.createdAt.split(' ')[0].split('-')
      Object.assign(_data, { year, month, day })
      this.randomGirl = _data

      setTimeout(() => {
        this.randomGirlLoad = false
      }, 500)
    },
    // 获取本周最热妹纸
    async getHotGirl () {
      const { data } = await this.$apis.queryHotThisWeek('views', 'Girl', 3)
      this.hotGirlList = data
    },

    // 获取本周最热文章
    async getHotArticle () {
      const { data } = await this.$apis.queryHotThisWeek('likes', 'Article', 5)
      this.articleList = data
    },

    // 获取本周最热干货
    async getHotReal () {
      const { data } = await this.$apis.queryHotThisWeek('likes', 'GanHuo', 5)
      this.reals = data
    }
  }
}
</script>

<style scoped lang="scss">
.sidebar {
  margin-left: 20px;

  &__article-title {
    @include text-overflow(2);
  }
}
.random-girl {
  &__container {
    position: relative;
  }
  &__date {
    position: absolute;
    top: 24px;
    left: 25px;
  }
  &__day {
    display: block;
    font-size: 42px;
  }
  &__title {
    position: absolute;
    left: 25px;
    bottom: 50px;
  }
  &__icon-refresh {
    position: absolute;
    bottom: 50px;
    right: 20px;

    &--loading {
      animation: loading .5s forwards;
    }
  }
}
</style>
